<span data-controller="modal" data-modal-root-selector-value="#add-group-modal-root" data-modal-content-selector-value="#add-group-modal" data-modal-title-value="Add Group" data-modal-size-value="s">
  <button class="crayons-btn" type="button" data-action="modal#toggleModal">
    Add group
  </button>

  <div id="add-group-modal" class="hidden">
    <div class="flex flex-col p-6 mb-6 gap-1">
      <%= form_for [:admin, ProfileFieldGroup.new] do |form| %>
        <div class="crayons-field">
          <%= form.label :name, class: "crayons-field__label" %>
          <%= form.text_field :name, class: "crayons-textfield" %>
        </div>
        <div class="crayons-field">
          <%= form.label :description, class: "crayons-field__label" %>
          <%= form.text_field :description, class: "crayons-textfield" %>
        </div>
        <%= form.submit class: "c-btn c-btn--primary mt-4" %>
      <% end %>
    </div>
  </div>

  <div id="add-group-modal-root"></div>
</span>
